<!--
 * @Author: QUAN
 * @Date: 2021-08-27 11:06:14
 * @LastEditTime: 2021-09-07 10:23:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-jimu-h5-activity\src\views\BlindBox\PrizePool.vue
-->

<template>
  <div class="prize-pool">
    <div class="box">
      <div class="title">盲盒奖品</div>
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item, index) in rewordsList" :key="index">
          <div class="rewords">
            <img :src="item.cover" alt="" />
            <p>{{ item.title }}</p>
            <p class="price">{{ item.priceLabel }}</p>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 奖品列表
        rewordsList: [],
        // swiper配置
        swiperOptions: {
          autoplay:true,
          slidesPerView: 'auto', //一屏展示多少个
          spaceBetween: 12,//间隔
        },
      };
    },
    created() {
      this.init();
    },
    mounted() {},
    methods: {
      init() {
        // 获取奖品列表
        this.$service.SalesLotteryRewards().then((res) => {
          this.rewordsList = res;
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  .prize-pool {
    position: relative;
    height: 23rem;
    border-radius: 1.2rem 1.2rem 0px 0px;
    background-color: #fff;
    margin-top: -1rem;
    .box {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      height: 20.6rem;
      width: calc(100% - 2.4rem);
      margin: 1.2rem 0rem;
      border-radius: 1.2rem 1.2rem 1.2rem 1.2rem;
      background: url(../../assets/images/activity/rewards-bg.png) no-repeat;
      background-size: cover;
      .title {
        background: linear-gradient(0deg, #00b584 0%, #71e9c8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.8rem;
        font-weight: 600;
        margin: 0.6rem 0rem;
        text-align: center;
      }

      .rewords {
        width: 11rem;
        height: 16rem;
        background-color: #fff;
        border-radius: 0.8rem;
        margin-right: 1.2rem;
        overflow: hidden;
        text-align: center;
        font-size: 1.4rem;
        font-weight: 500;
        color: #111;
        img {
          width: 11rem;
          height: 11rem;
          display: block;
        }
        p{
          margin-top: 0.5rem;
        }
        .price {
          font-size: 1.2rem;
          font-weight: 400;
          color: #ff9c00;
        }
      }
      // swiper的样式
      .swiper-container {
        padding: 0rem 1.2rem;
      }
      .swiper-slide {
        width: 11rem !important;
      }
    }
  }
</style>
